Getting Started with React Development with the React Suite Library — Divider, Placeholder, and Progress Bar

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Divider

We can add a divider into our app with the Divider component.

For instance, we can write:

import React from "react";
import { Divider } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <p>hello</p>
      <Divider />
      <p>world</p>
    </div>
  );
}

to add a divider between the 2 p elements.

We can add a divider with text:

import React from "react";
import { Divider } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Divider>Divider</Divider>
    </div>
  );
}

It’ll be shown in the middle of the divider.

We can add vertical dividers with the vertical prop:

import React from "react";
import { Divider } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <span>Edit</span>
      <Divider vertical />
      <span>Update</span>
      <Divider vertical />
      <span>Save</span>
    </div>
  );
}

Progress Bar

We can add a progress bar with the Progress module.

For instance, we can write:

import React from "react";
import { Progress } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Progress.Line percent={30} status="active" />
    </div>
  );
}

to add a progress bar.

percent is the progress percentage.

status has the color of the bar.

We can hide the percentage display on the right with showInfo set to false :

import React from "react";
import { Progress } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Progress.Line percent={30} status="active" showInfo={false} />
    </div>
  );
}

Also, we can add a progress circle with the Progress.Circle component:

import React from "react";
import { Progress } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Progress.Circle percent={30} strokeColor="#ffc107" />
    </div>
  );
}

Placeholder

We can add placeholders into our app with the Placeholder module.

For instance, we can write:

import React from "react";
import { Placeholder } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Placeholder.Paragraph style={{ marginTop: 30 }} graph="circle" />
    </div>
  );
}

to add a paragraph placeholder.

We set graph to 'circle' to add a circle on the left side.

We can also set it to 'square' and 'image' .

Also, we can add a grid placeholder with Placeholder.Grid :

import React from "react";
import { Placeholder } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Placeholder.Grid rows={5} columns={6} active />
    </div>
  );
}

We can add a graph placeholder with Placeholder.Graph :

import React from "react";
import { Placeholder } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Placeholder.Graph active />
    </div>
  );
}

Conclusion

We can add dividers, progress bars, and placeholders into our app with React Suite.